<template>
    <div class="actions">
        <div class="filter_bar">
            <div class="input_group">
                <label class="txt_base" >所属办公室：</label>
                <el-select v-model="room" placeholder="请选择" size="small">
                    <el-option
                            v-for="item in roomOptions"
                            :key="item.value"
                            :label="item.name"
                            :value="item.value"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="input_group" >
                <label class="txt_base" >地点：</label>
            <el-autocomplete
                    v-model="address"
                    placeholder="请输入内容"
                    size="small"
            ></el-autocomplete>
            </div>
            <div class="input_group">
                <label class="txt_base" >日期：</label>
                <el-date-picker size="small" v-model="executionDate" type="daterange" align="center" unlink-panels range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                </el-date-picker>
            </div>

            <div class="input_group">
                <label  class="txt_base">设备类型：</label>
                <el-radio-group v-model="faultObjType" size="small" >
                    <el-radio-button label="" >所有</el-radio-button>
                    <el-radio-button label="教学设备" >教学设备</el-radio-button>
                    <el-radio-button label="非教学设备">非教学设备</el-radio-button>
                </el-radio-group>
            </div>


            <div class="input_group">
                <label  class="txt_base">包含关键字：</label>
                <div>
                    <el-input placeholder="请输入内容" v-model="keyword" size="small">
                    </el-input>
                </div>
                <el-button type="primary" size="small" style="margin-left: 20px" plain @click="fetchData()">筛选</el-button>
                <el-button type="primary" size="small"
                           style="margin-left: 20px" plain @click="reset">重置</el-button>
            </div>
        </div>
        <el-tabs v-model="activeName" >
            <el-tab-pane label="问题列表" name="report">
                <el-table
                        :data="reports"
                        style="height: 500px;margin: 0 auto">
                    <el-table-column prop="faultObjType" label="故障类型" width="180">
                    </el-table-column>
                    <el-table-column prop="content" label="问题描述" width="180">
                    </el-table-column>
                    <el-table-column prop="address" label="地点" width="80">
                    </el-table-column>
                    <el-table-column prop="user.userName" label="联系人" width="80">
                    </el-table-column>
                    <el-table-column prop="phoneNum" label="联系人电话" width="180">
                    </el-table-column>
                    <el-table-column prop="createdAt" label="时间" >
                    </el-table-column>
                    <el-table-column  label="操作" fixed="right" width="130">
                        <div slot-scope="scope" >
                            <el-button  type="text" size="small" >处理</el-button>
                            <el-button  type="text" size="small">还原</el-button>
                            <el-button  type="text" size="small" >详情</el-button>
                        </div>
                    </el-table-column>
                </el-table>
                <br><br>
                <div class="block">
                    <!--<el-pagination-->
                            <!--@size-change="handleSizeChange"-->
                            <!--@current-change="handleCurrentChange"-->
                            <!--:current-page.sync="currentPage3"-->
                            <!--:page-size="20"-->
                            <!--layout="prev, pager, next, jumper"-->
                            <!--:total="100"-->
                            <!--background >-->
                    <!--</el-pagination>-->
                </div>
            </el-tab-pane>

            <el-tab-pane label="行动列表" name="action">
                <el-table
                        :data="actions"
                        style="width: 100%">
                    <el-table-column prop="report.content" label="问题描述" width="180">
                    </el-table-column>
                    <el-table-column prop="remarks" label="维护备注" width="180">
                    </el-table-column>
                    <el-table-column prop="report.address" label="地点" width="80">
                    </el-table-column>
                    <!--<el-table-column prop="name" label="联系人" width="80">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="num" label="联系人电话" width="180">-->
                    <!--</el-table-column>-->
                    <!--<el-table-column prop="date" label="时间" >-->
                    <!--</el-table-column>-->
                    <el-table-column prop="endAt" label="行动完成时间" width="180">
                    </el-table-column>
                    <el-table-column prop="hero.uname" label="经办人" width="180">
                    </el-table-column>
                    <el-table-column prop="actors" label="参与人" width="180">
                    </el-table-column>
                    <!--<el-table-column  label="操作" fixed="right" width="130">-->
                        <!--<div slot-scope="scope" >-->
                            <!--<el-button  type="text" size="small">接受</el-button>-->
                            <!--<el-button  type="text" size="small">忽略</el-button>-->
                            <!--<el-button  type="text" size="small" >详情</el-button>-->
                        <!--</div>-->
                    <!--</el-table-column>-->
                </el-table>
            </el-tab-pane>
        </el-tabs>

    </div>
</template>

<script>
import FrmFeService from '../../service/FrmFeService'

    export default {
        name: "Actions",
        methods:{
            reset()
            {
                this.page=0
                this.address=null
                this.faultObjType=null
                this.room=null
                this.executionDate=null
                this.keywords=null
            },
            fetchData()
            {
                if(this.activeName!='report')this.queryActions()
                else this.queryReports()
            },
            queryActions(){
                let app=this

                FrmFeService.queryActions({
                    after:app.executionDate[0],
                    before:app.executionDate[1],
                    address:app.address,
                    faultObjType:app.faultObjType,
                    room:app.room,
                    keyword: app.keyword,
                    pageNo:app.page
                }).then(resp=>{

                    app.actions.splice(0,app.actions.length)
                    for(let i=0;i<resp.data.data.content.length;i++)
                    {
                        app.actions.push(resp.data.data.content[i])
                    }
                    console.log(app.actions)
                })


            },
            queryReports(){
                let app=this
                console.log(app.executionDate)
                FrmFeService.queryReports({
                    after:app.executionDate[0],
                    before:app.executionDate[1],
                    address:app.address,
                    faultObjType:app.faultObjType,
                    room:app.room,
                    keyword: app.keyword,
                    pageNo:app.page
                }).then(resp=>{
                    app.reports.splice(0,app.reports.length)
                    for(let i=0;i<resp.data.data.content.length;i++)
                    {
                        app.reports.push(resp.data.data.content[i])
                    }
                })

            }
        },
        data(){
            return{
                page:0,
                address:null,
                faultObjType:"",
                room:null,
                executionDate:'',
                keyword:'',
                roomOptions:[

                    {name:"8-506办公室(本办公室)",value:"8-506"},
                    {name:"任何办公室",value:null },
                    {name:"1-906办公室",value:"1-906"},
                    {name:"9栋办公室",value:"9"}

                ],
                activeName:"report",
                roomFilter:true,
                reports: [],
                actions: [],
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '所有',
                            onClick(picker) {
                                let app=this

                                const end = new Date();
                                const start = new Date("1/1/1970 00:00:00");
                                end.setTime(end.getTime() + 10 * 365 * 24 * 3600 * 1000)
                                picker.$emit('pick', [start, end]);
                            }
                        },
                        {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

            }
        }
    }
</script>

<style scoped>
    .filter_bar
    {
        display:flex;
        flex-wrap:wrap;
        justify-content: left;
        align-items:center;
    }



</style>